<template>
<div class="ww">
    <h1>年龄分类</h1>
    <input v-model="age" type="number" placeholder="输入你的年龄" />
    <h4>年龄分类: {{ ageCategory }}</h4>
</div>
</template>

<script setup>
import {ref, watch} from 'vue'

const age = ref(0)
const ageCategory = ref('')

//监听age的变化
watch(age, (newAge) => {
    if(newAge < 0){
        ageCategory.value = "无效年龄"
    } else if(newAge < 7){
        ageCategory.value = "幼儿"
    } else if(newAge < 13){
        ageCategory.value = "儿童"
    } else if(newAge < 18){
        ageCategory.value = "青少年"
    } else if(newAge < 1000){
        ageCategory.value = "成人"
    } else{
        ageCategory.value = "天山童姥"
    }
})

</script>

<style scoped>
.ww{
    background-color: rgb(234, 234, 234);
    border-radius: 10px;
    padding:20px;
}
</style>